<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="4" :sm="6">
            <a-form-item label="计划编号">
              <a-input placeholder="请输入" v-model="queryParam.planNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="6">
            <a-form-item label="计划名称">
              <a-input placeholder="请输入" v-model="queryParam.planName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="6">
            <a-form-item label="计划年度">
              <a-date-picker
                mode="year"
                placeholder="请选择年份"
                format="YYYY"
                :allowClear="false"
                value-format="yyyy-MM-dd"
                v-model="queryParam.year"
                :open="yearPickShow"
                style="width: 100%"
                @panelChange="handlePanelChange"
                @openChange="handleOpenChange"
              />
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="6">
            <a-form-item label="计划类型">
              <j-dict-select-tag
                style="width: 100%"
                v-model="queryParam.planType"
                placeholder="请选择"
                dict-code="inconplantype"
              />
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">清除条件</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div style="width: 100%; display: flex; align-content: center; justify-content: flex-end; padding: 8px 16px">
      <a-button size="small" type="primary" icon="" style="margin-right: 16px" @click="exportZhenGai"
        >整改批量导出</a-button
      >
      <a-button size="small" type="primary" icon="" @click="exportQueXian">缺陷批量导出</a-button>
    </div>
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :row-selection="{ selectedRowKeys: selectedRows, onChange: onSelectChange }"
      @change="handleTableChange"
    >
      <!-- <span slot='年度计划附件'>
          <a-button size='small' type='link' icon=''>查看</a-button>
        </span> -->
      <span slot="action" slot-scope="text, record">
        <a-button v-if="record.isEdit != '1'" size="small" type="link" icon="" @click="handleViewDetail(record, false)"
          >查看</a-button
        >
        <a-button v-else size="small" type="link" icon="" @click="handleViewDetail(record, true)">编辑</a-button>
      </span>
      <span slot="confirmEnd" slot-scope="text, record">
        <template>
          <a-popconfirm v-if="record.isEdit == '1'" :title="`确定要结束这项吗?`" @confirm="handleCommit(record)">
            <a-button size="small" type="link">确认</a-button>
          </a-popconfirm>
          <span style="color: red" v-else>待提交部门确认</span>
        </template>
      </span>
    </a-table>
    <!-- table区域-end -->
    <detailModel :role="role" ref="detailModel"></detailModel>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import columns from './indexColumns'
import { httpAction, getAction, postAction, deleteAction, putAction } from '@/api/manage'
import moment from 'moment'
import detailModel from './searchResult/index'

export default {
  name: 'ss',
  mixins: [JeecgListMixin],
  components: { detailModel },
  data() {
    return {
      // 表头
      columns: columns(this),
      url: {
        list: '/incon/inconReviewPlan/queryPlanExecute',
        export: '/incon/inconReviewPlan/exportByModuleFlag',
        queren: '/incon/inconReviewPlan/confirmExecute',
        role: 'performcheck/checkDeptInfo/getOrgLevel',
      },
      role: '',
      yearPickShow: false,
      dataSource: [],
      selectedRows: [],
    }
  },
  computed: {},
  mounted() {
    // this.getRole()
  },
  methods: {
    async getRole() {
      this.role = await getAction(this.url.role)
    },
    async handleCommit(row) {
      // console.log(row.confirmUnit, this.role)
      const data = await putAction(`${this.url.queren}?id=${row.id}`)
      if (+data.code != 200) {
        this.$message.error(data.message)
      } else {
        this.$message.success(data.message)
        this.loadData()
      }
    },
    // 上传多选
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRows = selectedRows.map((item) => item.id)
    },
    handleConfirmDelete() {},
    // 导出
    exportZhenGai() {
      if (this.selectedRows.length) {
        this.getEport('/incon/inconDefectTrack/exportByPlanId')
      } else {
        this.$message.error('请选择要导出的计划')
      }
    },
    exportQueXian() {
      if (this.selectedRows.length) {
        this.getEport('/incon/inconDefectReview/exportByPlanId')
      } else {
        this.$message.error('请选择要导出的计划')
      }
    },
    async getEport(url) {
      const { result } = await getAction(`${url}?planIds=${this.selectedRows}`)
      this.handleDownloadFile(result)
    },
    openCreatModel() {
      this.$refs.creatModel.visible = true
    },
    handleDownloadFile(fileUrl) {
      this.$message.success('正在下载，请稍等！')
      let url = `${window._CONFIG['domianURL']}/sys/common/download/${fileUrl}`
      window.open(url, '_blank')
    },
    handleAddSubmit(evt) {
      return new Promise((re, rj) => {
        postAction(this.url.add, evt).then((res) => {
          if (res.success) {
            this.$refs.table.loadData()
            this.$message.success(res.message)
            re(res.success)
          } else {
            rj(res.success)
            this.$message.error(res.message)
          }
        })
      })
    },
    handlePanelChange(value) {
      this.queryParam.year = moment(value).format('YYYY')
      this.yearPickShow = false
      this.$refs.form.validateField('year', (error) => {
        console.log(error)
      })
    },
    // 弹出日历和关闭日历的回调
    handleOpenChange(status) {
      this.yearPickShow = status
    },
    handleViewDetail(row, disabled) {
      // this.$refs.detailModel.planId = row.id
      this.$refs.detailModel.visible = true
      this.$refs.detailModel.isable = disabled
      this.$refs.detailModel.getPlanId(row)
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>